கேம் ஆடியோ: வலை ஆடியோ ஏபிஐ-க்கான ஒரு விரிவான வழிகாட்டி

வலை ஆடியோ ஏபிஐ என்பது வலையில் ஆடியோவைக் கட்டுப்படுத்துவதற்கான ஒரு சக்திவாய்ந்த அமைப்பாகும். இது டெவலப்பர்களை சிக்கலான ஆடியோ செயலாக்க வரைபடங்களை உருவாக்க அனுமதிக்கிறது, வலை விளையாட்டுகள், ஊடாடும் பயன்பாடுகள் மற்றும் மல்டிமீடியா திட்டங்களில் செறிவான மற்றும் ஊடாடும் ஒலி அனுபவங்களை செயல்படுத்துகிறது. இந்த வழிகாட்டி வலை ஆடியோ ஏபிஐ-யின் ஒரு விரிவான கண்ணோட்டத்தை வழங்குகிறது, தொழில்முறை விளையாட்டு ஆடியோ மேம்பாட்டிற்கான அடிப்படைக் கருத்துக்கள், நடைமுறை நுட்பங்கள் மற்றும் மேம்பட்ட அம்சங்களை உள்ளடக்கியது. நீங்கள் ஒரு அனுபவமிக்க ஆடியோ பொறியாளராக இருந்தாலும் சரி அல்லது உங்கள் திட்டங்களில் ஒலியைச் சேர்க்க விரும்பும் ஒரு வலை டெவலப்பராக இருந்தாலும் சரி, இந்த வழிகாட்டி வலை ஆடியோ ஏபிஐ-யின் முழு திறனையும் பயன்படுத்தத் தேவையான அறிவு மற்றும் திறன்களை உங்களுக்கு வழங்கும்.

வலை ஆடியோ ஏபிஐ-யின் அடிப்படைகள்

ஆடியோ கான்டெக்ஸ்ட் (Audio Context)

வலை ஆடியோ ஏபிஐ-யின் இதயத்தில் AudioContext உள்ளது. இதை ஆடியோ இயந்திரம் என்று நினைத்துப் பாருங்கள் – இதுவே அனைத்து ஆடியோ செயலாக்கமும் நடைபெறும் சூழல். நீங்கள் ஒரு AudioContext நிகழ்வை உருவாக்குகிறீர்கள், பின்னர் உங்கள் அனைத்து ஆடியோ நோட்ஸ்களும் (மூலங்கள், விளைவுகள், இலக்குகள்) அந்த கான்டெக்ஸ்டில் இணைக்கப்படுகின்றன.

உதாரணம்:

            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            

              
                Copy
              
            
          

இந்தக் குறியீடு ஒரு புதிய AudioContext-ஐ உருவாக்குகிறது, உலாவி இணக்கத்தன்மையை கணக்கில் எடுத்துக்கொள்கிறது (சில பழைய உலாவிகள் webkitAudioContext-ஐப் பயன்படுத்தக்கூடும்).

ஆடியோ நோட்ஸ்: அடிப்படைக் கூறுகள்

ஆடியோ நோட்ஸ் என்பவை ஆடியோவைச் செயலாக்கி கையாளும் தனிப்பட்ட அலகுகள். அவை ஆடியோ மூலங்களாக (ஒலி கோப்புகள் அல்லது அலைப்பிகள் போன்றவை), ஆடியோ விளைவுகளாக (ரிவெர்ப் அல்லது டிலே போன்றவை), அல்லது இலக்குகளாக (உங்கள் ஸ்பீக்கர்கள் போன்றவை) இருக்கலாம். இந்த நோட்ஸ்களை ஒன்றாக இணைத்து ஒரு ஆடியோ செயலாக்க வரைபடத்தை உருவாக்குகிறீர்கள்.

சில பொதுவான வகை ஆடியோ நோட்ஸ் பின்வருமாறு:

• AudioBufferSourceNode: ஒரு ஆடியோ பஃப்பரிலிருந்து (கோப்பிலிருந்து ஏற்றப்பட்டது) ஆடியோவை இயக்குகிறது.
• OscillatorNode: குறிப்பிட்ட கால இடைவெளியில் அலைவடிவங்களை (சைன், ஸ்கொயர், சாடூத், முக்கோணம்) உருவாக்குகிறது.
• GainNode: ஆடியோ சிக்னலின் ஒலியளவைக் கட்டுப்படுத்துகிறது.
• DelayNode: ஒரு டிலே விளைவை உருவாக்குகிறது.
• BiquadFilterNode: பல்வேறு வடிகட்டி வகைகளை (லோ-பாஸ், ஹை-பாஸ், பேண்ட்-பாஸ், போன்றவை) செயல்படுத்துகிறது.
• AnalyserNode: ஆடியோவின் நிகழ்நேர அதிர்வெண் மற்றும் நேர-கள பகுப்பாய்வை வழங்குகிறது.
• ConvolverNode: ஒரு கான்வல்யூஷன் விளைவைப் (எ.கா., ரிவெர்ப்) பயன்படுத்துகிறது.
• DynamicsCompressorNode: ஆடியோவின் டைனமிக் வரம்பை ஆற்றலுடன் குறைக்கிறது.
• StereoPannerNode: ஆடியோ சிக்னலை இடது மற்றும் வலது சேனல்களுக்கு இடையில் நகர்த்துகிறது.

ஆடியோ நோட்ஸ்களை இணைத்தல்

connect() முறையானது ஆடியோ நோட்ஸ்களை ஒன்றாக இணைக்கப் பயன்படுகிறது. ஒரு நோடின் வெளியீடு மற்றொன்றின் உள்ளீட்டுடன் இணைக்கப்பட்டு, ஒரு சிக்னல் பாதையை உருவாக்குகிறது.

உதாரணம்:

            sourceNode.connect(gainNode);
gainNode.connect(audioContext.destination); // Connect to the speakers
            

              
                Copy
              
            
          

இந்தக் குறியீடு ஒரு ஆடியோ மூல நோடை ஒரு கெயின் நோடுடன் இணைக்கிறது, பின்னர் கெயின் நோடை AudioContext-இன் இலக்குடன் (உங்கள் ஸ்பீக்கர்கள்) இணைக்கிறது. ஆடியோ சிக்னல் மூலத்திலிருந்து, கெயின் கட்டுப்பாடு வழியாக, பின்னர் வெளியீட்டிற்குப் பாய்கிறது.

ஆடியோவை ஏற்றுதல் மற்றும் இயக்குதல்

ஆடியோ தரவைப் பெறுதல்

ஒலி கோப்புகளை இயக்க, நீங்கள் முதலில் ஆடியோ தரவைப் பெற வேண்டும். இது பொதுவாக XMLHttpRequest அல்லது fetch ஏபிஐ பயன்படுத்தி செய்யப்படுகிறது.

உதாரணம் (fetch பயன்படுத்தி):

            fetch('audio/mysound.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    // Audio data is now in the audioBuffer
    // You can create an AudioBufferSourceNode and play it
  })
  .catch(error => console.error('Error loading audio:', error));
            

              
                Copy
              
            
          

இந்தக் குறியீடு ஒரு ஆடியோ கோப்பை ('audio/mysound.mp3') பெற்று, அதை ஒரு AudioBuffer-ஆக டிகோட் செய்து, சாத்தியமான பிழைகளைக் கையாளுகிறது. உங்கள் சர்வர் சரியான MIME வகையுடன் (எ.கா., MP3-க்கு audio/mpeg) ஆடியோ கோப்புகளை வழங்க உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.

ஒரு AudioBufferSourceNode-ஐ உருவாக்கி இயக்குதல்

உங்களிடம் ஒரு AudioBuffer கிடைத்தவுடன், நீங்கள் ஒரு AudioBufferSourceNode-ஐ உருவாக்கி, அந்த பஃப்பரை அதற்கு ஒதுக்கலாம்.

உதாரணம்:

            const sourceNode = audioContext.createBufferSource();
sourceNode.buffer = audioBuffer;
sourceNode.connect(audioContext.destination);
sourceNode.start(); // Start playing the audio
            

              
                Copy
              
            
          

இந்தக் குறியீடு ஒரு AudioBufferSourceNode-ஐ உருவாக்கி, ஏற்றப்பட்ட ஆடியோ பஃப்பரை அதற்கு ஒதுக்கி, அதை AudioContext-இன் இலக்குடன் இணைத்து, ஆடியோவை இயக்கத் தொடங்குகிறது. start() முறையானது ஆடியோ எப்போது இயக்கப்பட வேண்டும் என்பதைக் குறிப்பிட ஒரு விருப்ப நேர அளவுருவை எடுக்கலாம் (ஆடியோ கான்டெக்ஸ்டின் தொடக்க நேரத்திலிருந்து வினாடிகளில்).

இயக்குதலைக் கட்டுப்படுத்துதல்

நீங்கள் ஒரு AudioBufferSourceNode-இன் இயக்கத்தை அதன் பண்புகள் மற்றும் முறைகளைப் பயன்படுத்தி கட்டுப்படுத்தலாம்:

• start(when, offset, duration): ஒரு குறிப்பிட்ட நேரத்தில், விருப்பமான ஆஃப்செட் மற்றும் கால அளவுடன் இயக்கத்தைத் தொடங்குகிறது.
• stop(when): ஒரு குறிப்பிட்ட நேரத்தில் இயக்கத்தை நிறுத்துகிறது.
• loop: ஆடியோ லூப் செய்யப்பட வேண்டுமா என்பதை தீர்மானிக்கும் ஒரு பூலியன் பண்பு.
• loopStart: லூப் தொடக்கப் புள்ளி (வினாடிகளில்).
• loopEnd: லூப் இறுதிப் புள்ளி (வினாடிகளில்).
• playbackRate.value: இயக்க வேகத்தைக் கட்டுப்படுத்துகிறது (1 என்பது சாதாரண வேகம்).

உதாரணம் (ஒரு ஒலியை லூப் செய்தல்):

            sourceNode.loop = true;
sourceNode.start();
            

              
                Copy
              
            
          

ஒலி விளைவுகளை உருவாக்குதல்

கெயின் கட்டுப்பாடு (ஒலியளவு)

GainNode ஆடியோ சிக்னலின் ஒலியளவைக் கட்டுப்படுத்தப் பயன்படுகிறது. நீங்கள் ஒரு GainNode-ஐ உருவாக்கி, ஒலியளவை சரிசெய்ய சிக்னல் பாதையில் அதை இணைக்கலாம்.

உதாரணம்:

            const gainNode = audioContext.createGain();
sourceNode.connect(gainNode);
gainNode.connect(audioContext.destination);
gainNode.gain.value = 0.5; // Set the gain to 50%
            

              
                Copy
              
            
          

gain.value பண்பு கெயின் காரணியைக் கட்டுப்படுத்துகிறது. 1 மதிப்பு ஒலியளவில் மாற்றமில்லை என்பதையும், 0.5 மதிப்பு 50% ஒலியளவு குறைப்பையும், 2 மதிப்பு ஒலியளவை இரட்டிப்பாக்குவதையும் குறிக்கிறது.

டிலே (தாமதம்)

DelayNode ஒரு டிலே விளைவை உருவாக்குகிறது. இது ஆடியோ சிக்னலை ஒரு குறிப்பிட்ட நேரத்திற்கு தாமதப்படுத்துகிறது.

உதாரணம்:

            const delayNode = audioContext.createDelay(2.0); // Max delay time of 2 seconds
delayNode.delayTime.value = 0.5; // Set the delay time to 0.5 seconds
sourceNode.connect(delayNode);
delayNode.connect(audioContext.destination);
            

              
                Copy
              
            
          

delayTime.value பண்பு தாமத நேரத்தை வினாடிகளில் கட்டுப்படுத்துகிறது. மேலும் உச்சரிக்கப்படும் டிலே விளைவை உருவாக்க நீங்கள் பின்னூட்டத்தையும் பயன்படுத்தலாம்.

ரிவெர்ப்

ConvolverNode ஒரு கான்வல்யூஷன் விளைவைப் பயன்படுத்துகிறது, இது ரிவெர்ப் உருவாக்கப் பயன்படுகிறது. ConvolverNode-ஐப் பயன்படுத்த உங்களுக்கு ஒரு இம்பல்ஸ் ரெஸ்பான்ஸ் கோப்பு (ஒரு இடத்தின் ஒலியியல் பண்புகளைக் குறிக்கும் ஒரு குறுகிய ஆடியோ கோப்பு) தேவை. உயர் தரமான இம்பல்ஸ் ரெஸ்பான்ஸ்கள் ஆன்லைனில் கிடைக்கின்றன, பெரும்பாலும் WAV வடிவத்தில்.

உதாரணம்:

            fetch('audio/impulse_response.wav')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    const convolverNode = audioContext.createConvolver();
    convolverNode.buffer = audioBuffer;
    sourceNode.connect(convolverNode);
    convolverNode.connect(audioContext.destination);
  })
  .catch(error => console.error('Error loading impulse response:', error));
            

              
                Copy
              
            
          

இந்தக் குறியீடு ஒரு இம்பல்ஸ் ரெஸ்பான்ஸ் கோப்பை ('audio/impulse_response.wav') ஏற்றி, ஒரு ConvolverNode-ஐ உருவாக்கி, இம்பல்ஸ் ரெஸ்பான்ஸை அதற்கு ஒதுக்கி, சிக்னல் பாதையில் அதை இணைக்கிறது. வெவ்வேறு இம்பல்ஸ் ரெஸ்பான்ஸ்கள் வெவ்வேறு ரிவெர்ப் விளைவுகளை உருவாக்கும்.

வடிப்பான்கள் (Filters)

BiquadFilterNode லோ-பாஸ், ஹை-பாஸ், பேண்ட்-பாஸ் போன்ற பல்வேறு வடிகட்டி வகைகளைச் செயல்படுத்துகிறது. ஆடியோ சிக்னலின் அதிர்வெண் உள்ளடக்கத்தை வடிவமைக்க வடிப்பான்கள் பயன்படுத்தப்படலாம்.

உதாரணம் (ஒரு லோ-பாஸ் வடிப்பானை உருவாக்குதல்):

            const filterNode = audioContext.createBiquadFilter();
filterNode.type = 'lowpass';
filterNode.frequency.value = 1000; // Cutoff frequency at 1000 Hz
sourceNode.connect(filterNode);
filterNode.connect(audioContext.destination);
            

              
                Copy
              
            
          

type பண்பு வடிகட்டி வகையைக் குறிப்பிடுகிறது, மற்றும் frequency.value பண்பு கட்ஆஃப் அதிர்வெண்ணைக் குறிப்பிடுகிறது. வடிப்பானின் பதிலை மேலும் வடிவமைக்க நீங்கள் Q (ரெசோனன்ஸ்) மற்றும் gain பண்புகளையும் கட்டுப்படுத்தலாம்.

பானிங் (Panning)

StereoPannerNode ஆடியோ சிக்னலை இடது மற்றும் வலது சேனல்களுக்கு இடையில் பான் செய்ய உங்களை அனுமதிக்கிறது. இது இடஞ்சார்ந்த விளைவுகளை உருவாக்கப் பயன்படுகிறது.

உதாரணம்:

            const pannerNode = audioContext.createStereoPanner();
pannerNode.pan.value = 0.5; // Pan to the right (1 is fully right, -1 is fully left)
sourceNode.connect(pannerNode);
pannerNode.connect(audioContext.destination);
            

              
                Copy
              
            
          

pan.value பண்பு பானிங்கைக் கட்டுப்படுத்துகிறது. -1 மதிப்பு ஆடியோவை முழுமையாக இடதுபுறம் பான் செய்கிறது, 1 மதிப்பு ஆடியோவை முழுமையாக வலதுபுறம் பான் செய்கிறது, மற்றும் 0 மதிப்பு ஆடியோவை மையப்படுத்துகிறது.

ஒலியைத் தொகுத்தல்

ஆஸிலேட்டர்கள் (Oscillators)

OscillatorNode சைன், ஸ்கொயர், சாடூத், மற்றும் முக்கோண அலைகள் போன்ற குறிப்பிட்ட கால இடைவெளியில் அலைவடிவங்களை உருவாக்குகிறது. தொகுக்கப்பட்ட ஒலிகளை உருவாக்க ஆஸிலேட்டர்கள் பயன்படுத்தப்படலாம்.

உதாரணம்:

            const oscillatorNode = audioContext.createOscillator();
oscillatorNode.type = 'sine'; // Set the waveform type
oscillatorNode.frequency.value = 440; // Set the frequency to 440 Hz (A4)
oscillatorNode.connect(audioContext.destination);
oscillatorNode.start();
            

              
                Copy
              
            
          

type பண்பு அலைவடிவ வகையைக் குறிப்பிடுகிறது, மற்றும் frequency.value பண்பு ஹெர்ட்ஸில் அதிர்வெண்ணைக் குறிப்பிடுகிறது. அதிர்வெண்ணை நுணுக்கமாக சரிசெய்ய நீங்கள் டிட்யூன் பண்பையும் கட்டுப்படுத்தலாம்.

என்வலப்கள் (Envelopes)

என்வலப்கள் காலப்போக்கில் ஒரு ஒலியின் வீச்சை வடிவமைக்கப் பயன்படுகின்றன. ADSR (Attack, Decay, Sustain, Release) என்வலப் ஒரு பொதுவான வகை என்வலப் ஆகும். வலை ஆடியோ ஏபிஐ-ல் உள்ளமைக்கப்பட்ட ADSR நோட் இல்லை என்றாலும், GainNode மற்றும் ஆட்டோமேஷனைப் பயன்படுத்தி ஒன்றை நீங்கள் செயல்படுத்தலாம்.

உதாரணம் (கெயின் ஆட்டோமேஷனைப் பயன்படுத்தி எளிமைப்படுத்தப்பட்ட ADSR):

            function createADSR(gainNode, attack, decay, sustainLevel, release) {
  const now = audioContext.currentTime;

  // Attack
  gainNode.gain.setValueAtTime(0, now);
  gainNode.gain.linearRampToValueAtTime(1, now + attack);

  // Decay
  gainNode.gain.linearRampToValueAtTime(sustainLevel, now + attack + decay);

  // Release (triggered later by the noteOff function)
  return function noteOff() {
    const releaseTime = audioContext.currentTime;
    gainNode.gain.cancelScheduledValues(releaseTime);
    gainNode.gain.linearRampToValueAtTime(0, releaseTime + release);
  };
}

const oscillatorNode = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillatorNode.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillatorNode.start();

const noteOff = createADSR(gainNode, 0.1, 0.2, 0.5, 0.3); // Example ADSR values

// ... Later, when the note is released:
// noteOff();

            

              
                Copy
              
            
          

இந்த உதாரணம் ஒரு அடிப்படை ADSR செயலாக்கத்தை விளக்குகிறது. இது காலப்போக்கில் கெயின் மதிப்பை தானியக்கமாக்க setValueAtTime மற்றும் linearRampToValueAtTime ஆகியவற்றைப் பயன்படுத்துகிறது. மேலும் சிக்கலான என்வலப் செயலாக்கங்கள் மென்மையான மாற்றங்களுக்கு எக்ஸ்போனென்ஷியல் வளைவுகளைப் பயன்படுத்தக்கூடும்.

இடஞ்சார்ந்த ஆடியோ மற்றும் 3D ஒலி

PannerNode மற்றும் AudioListener

மேம்பட்ட இடஞ்சார்ந்த ஆடியோவிற்கு, குறிப்பாக 3D சூழல்களில், PannerNode-ஐப் பயன்படுத்தவும். PannerNode ஒரு ஆடியோ மூலத்தை 3D இடத்தில் நிலைநிறுத்த உங்களை அனுமதிக்கிறது. AudioListener கேட்பவரின் (உங்கள் காதுகள்) நிலை மற்றும் நோக்குநிலையைக் குறிக்கிறது.

PannerNode அதன் நடத்தையைக் கட்டுப்படுத்தும் பல பண்புகளைக் கொண்டுள்ளது:

• positionX, positionY, positionZ: ஆடியோ மூலத்தின் 3D ஆயத்தொலைவுகள்.
• orientationX, orientationY, orientationZ: ஆடியோ மூலம் எதிர்கொள்ளும் திசை.
• panningModel: பயன்படுத்தப்படும் பானிங் அல்காரிதம் (எ.கா., 'equalpower', 'HRTF'). HRTF (Head-Related Transfer Function) ஒரு யதார்த்தமான 3D ஒலி அனுபவத்தை வழங்குகிறது.
• distanceModel: பயன்படுத்தப்படும் தூரக் குறைப்பு மாதிரி (எ.கா., 'linear', 'inverse', 'exponential').
• refDistance: தூரக் குறைப்புக்கான குறிப்பு தூரம்.
• maxDistance: தூரக் குறைப்புக்கான அதிகபட்ச தூரம்.
• rolloffFactor: தூரக் குறைப்புக்கான ரோல்ஆஃப் காரணி.
• coneInnerAngle, coneOuterAngle, coneOuterGain: ஒரு கூம்பு வடிவ ஒலியை உருவாக்குவதற்கான அளவுருக்கள் (திசை சார்ந்த ஒலிகளுக்கு பயனுள்ளது).

உதாரணம் (ஒரு ஒலி மூலத்தை 3D இடத்தில் நிலைநிறுத்துதல்):

            const pannerNode = audioContext.createPanner();
pannerNode.positionX.value = 2;
pannerNode.positionY.value = 0;
pannerNode.positionZ.value = -1;

sourceNode.connect(pannerNode);
pannerNode.connect(audioContext.destination);

// Position the listener (optional)
audioContext.listener.positionX.value = 0;
audioContext.listener.positionY.value = 0;
audioContext.listener.positionZ.value = 0;
            

              
                Copy
              
            
          

இந்தக் குறியீடு ஆடியோ மூலத்தை (2, 0, -1) ஆயத்தொலைவுகளிலும், கேட்பவரை (0, 0, 0) ஆயத்தொலைவுகளிலும் நிலைநிறுத்துகிறது. இந்த மதிப்புகளை சரிசெய்வது ஒலியின் உணரப்பட்ட நிலையை மாற்றும்.

HRTF பானிங்

HRTF பானிங், கேட்பவரின் தலை மற்றும் காதுகளின் வடிவத்தால் ஒலி எவ்வாறு மாற்றப்படுகிறது என்பதை உருவகப்படுத்த தலை-தொடர்புடைய பரிமாற்ற செயல்பாடுகளை (Head-Related Transfer Functions) பயன்படுத்துகிறது. இது ஒரு யதார்த்தமான மற்றும் ஆழ்ந்த 3D ஒலி அனுபவத்தை உருவாக்குகிறது. HRTF பானிங்கைப் பயன்படுத்த, panningModel பண்பை 'HRTF' என அமைக்கவும்.

உதாரணம்:

            const pannerNode = audioContext.createPanner();
pannerNode.panningModel = 'HRTF';
// ... rest of the code for positioning the panner ...
            

              
                Copy
              
            
          

HRTF பானிங்கிற்கு சம சக்தி பானிங்கை விட அதிக செயலாக்க சக்தி தேவைப்படுகிறது, ஆனால் கணிசமாக மேம்பட்ட இடஞ்சார்ந்த ஆடியோ அனுபவத்தை வழங்குகிறது.

ஆடியோவைப் பகுப்பாய்வு செய்தல்

AnalyserNode

AnalyserNode ஆடியோ சிக்னலின் நிகழ்நேர அதிர்வெண் மற்றும் நேர-கள பகுப்பாய்வை வழங்குகிறது. இது ஆடியோவைக் காட்சிப்படுத்த, ஆடியோ-எதிர்வினை விளைவுகளை உருவாக்க அல்லது ஒரு ஒலியின் பண்புகளைப் பகுப்பாய்வு செய்யப் பயன்படுத்தப்படலாம்.

AnalyserNode பல பண்புகள் மற்றும் முறைகளைக் கொண்டுள்ளது:

• fftSize: அதிர்வெண் பகுப்பாய்விற்காக பயன்படுத்தப்படும் ஃபாஸ்ட் ஃபோரியர் டிரான்ஸ்ஃபார்ம் (FFT) அளவு. இது 2-இன் அடுக்காக இருக்க வேண்டும் (எ.கா., 32, 64, 128, 256, 512, 1024, 2048).
• frequencyBinCount: fftSize-இல் பாதி. இது getByteFrequencyData அல்லது getFloatFrequencyData மூலம் வழங்கப்படும் அதிர்வெண் பின்களின் எண்ணிக்கை.
• minDecibels, maxDecibels: அதிர்வெண் பகுப்பாய்விற்காக பயன்படுத்தப்படும் டெசிபல் மதிப்புகளின் வரம்பு.
• smoothingTimeConstant: காலப்போக்கில் அதிர்வெண் தரவுகளுக்குப் பயன்படுத்தப்படும் ஒரு மென்மையாக்கும் காரணி.
• getByteFrequencyData(array): ஒரு Uint8Array-ஐ அதிர்வெண் தரவுகளுடன் (0 மற்றும் 255-க்கு இடையிலான மதிப்புகள்) நிரப்புகிறது.
• getByteTimeDomainData(array): ஒரு Uint8Array-ஐ நேர-கள தரவுகளுடன் (அலைவடிவ தரவு, 0 மற்றும் 255-க்கு இடையிலான மதிப்புகள்) நிரப்புகிறது.
• getFloatFrequencyData(array): ஒரு Float32Array-ஐ அதிர்வெண் தரவுகளுடன் (டெசிபல் மதிப்புகள்) நிரப்புகிறது.
• getFloatTimeDomainData(array): ஒரு Float32Array-ஐ நேர-கள தரவுகளுடன் (இயல்பாக்கப்பட்ட மதிப்புகள் -1 மற்றும் 1-க்கு இடையில்) நிரப்புகிறது.

உதாரணம் (கேன்வாஸைப் பயன்படுத்தி அதிர்வெண் தரவைக் காட்சிப்படுத்துதல்):

            const analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 2048;
const bufferLength = analyserNode.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

sourceNode.connect(analyserNode);
analyserNode.connect(audioContext.destination);

function draw() {
  requestAnimationFrame(draw);

  analyserNode.getByteFrequencyData(dataArray);

  // Draw the frequency data on a canvas
  canvasContext.fillStyle = 'rgb(0, 0, 0)';
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);

  const barWidth = (canvas.width / bufferLength) * 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasContext.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
    canvasContext.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
            

              
                Copy
              
            
          

இந்தக் குறியீடு ஒரு AnalyserNode-ஐ உருவாக்கி, அதிர்வெண் தரவைப் பெற்று, அதை ஒரு கேன்வாஸில் வரைகிறது. ஒரு நிகழ்நேர காட்சிப்படுத்தலை உருவாக்க draw செயல்பாடு requestAnimationFrame-ஐப் பயன்படுத்தி மீண்டும் மீண்டும் அழைக்கப்படுகிறது.

செயல்திறனை மேம்படுத்துதல்

ஆடியோ வொர்க்கர்ஸ்

சிக்கலான ஆடியோ செயலாக்கப் பணிகளுக்கு, ஆடியோ வொர்க்கர்ஸைப் பயன்படுத்துவது பெரும்பாலும் நன்மை பயக்கும். ஆடியோ வொர்க்கர்ஸ் ஆடியோ செயலாக்கத்தை ஒரு தனி திரெட்டில் செய்ய உங்களை அனுமதிக்கிறது, இது பிரதான திரெட்டைத் தடுப்பதைத் தடுத்து செயல்திறனை மேம்படுத்துகிறது.

உதாரணம் (ஒரு ஆடியோ வொர்க்கரைப் பயன்படுத்துதல்):

            // Create an AudioWorkletNode
await audioContext.audioWorklet.addModule('my-audio-worker.js');
const myAudioWorkletNode = new AudioWorkletNode(audioContext, 'my-processor');

sourceNode.connect(myAudioWorkletNode);
myAudioWorkletNode.connect(audioContext.destination);

            

              
                Copy
              
            
          

my-audio-worker.js கோப்பு உங்கள் ஆடியோ செயலாக்கத்திற்கான குறியீட்டைக் கொண்டுள்ளது. இது ஆடியோ தரவில் செயலாக்கத்தைச் செய்யும் ஒரு AudioWorkletProcessor வகுப்பை வரையறுக்கிறது.

ஆப்ஜெக்ட் பூலிங்

அடிக்கடி ஆடியோ நோட்ஸ்களை உருவாக்குவதும் அழிப்பதும் செலவுமிக்கதாக இருக்கும். ஆப்ஜெக்ட் பூலிங் என்பது ஒவ்வொரு முறையும் புதியவற்றை உருவாக்குவதற்குப் பதிலாக, நீங்கள் ஆடியோ நோட்ஸ்களின் ஒரு தொகுப்பை முன்கூட்டியே ஒதுக்கி, அவற்றை மீண்டும் பயன்படுத்தும் ஒரு நுட்பமாகும். இது செயல்திறனை கணிசமாக மேம்படுத்தும், குறிப்பாக நீங்கள் அடிக்கடி நோட்ஸ்களை உருவாக்க மற்றும் அழிக்க வேண்டிய சூழ்நிலைகளில் (எ.கா., பல குறுகிய ஒலிகளை இயக்குதல்).

நினைவகக் கசிவுகளைத் தவிர்த்தல்

நினைவகக் கசிவுகளைத் தவிர்க்க ஆடியோ வளங்களை முறையாக நிர்வகிப்பது அவசியம். இனி தேவைப்படாத ஆடியோ நோட்ஸ்களைத் துண்டித்து, இனி பயன்படுத்தப்படாத எந்த ஆடியோ பஃப்பர்களையும் விடுவிப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

மேம்பட்ட நுட்பங்கள்

மாடுலேஷன்

மாடுலேஷன் என்பது ஒரு ஆடியோ சிக்னலைப் பயன்படுத்தி மற்றொரு ஆடியோ சிக்னலின் அளவுருக்களைக் கட்டுப்படுத்தும் ஒரு நுட்பமாகும். இது ட்ரெமோலோ, வைப்ராடோ மற்றும் ரிங் மாடுலேஷன் போன்ற பரந்த அளவிலான சுவாரஸ்யமான ஒலி விளைவுகளை உருவாக்கப் பயன்படும்.

கிரானுலர் சின்தெசிஸ்

கிரானுலர் சின்தெசிஸ் என்பது ஆடியோவை சிறிய துண்டுகளாக (கிரெயின்ஸ்) உடைத்து, பின்னர் அவற்றை வெவ்வேறு வழிகளில் மீண்டும் இணைக்கும் ஒரு நுட்பமாகும். இது சிக்கலான மற்றும் வளரும் டெக்ஸ்சர்கள் மற்றும் சவுண்ட்ஸ்கேப்களை உருவாக்கப் பயன்படும்.

WebAssembly மற்றும் SIMD

கணக்கீட்டு ரீதியாக தீவிரமான ஆடியோ செயலாக்கப் பணிகளுக்கு, WebAssembly (Wasm) மற்றும் SIMD (Single Instruction, Multiple Data) வழிமுறைகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். Wasm உலாவியில் தொகுக்கப்பட்ட குறியீட்டை நேட்டிவ் வேகத்தில் இயக்க உங்களை அனுமதிக்கிறது, மேலும் SIMD ஒரே நேரத்தில் பல தரவுப் புள்ளிகளில் ஒரே செயல்பாட்டைச் செய்ய உங்களை அனுமதிக்கிறது. இது சிக்கலான ஆடியோ அல்காரிதம்களுக்கான செயல்திறனை கணிசமாக மேம்படுத்தும்.

சிறந்த நடைமுறைகள்

• ஒரு சீரான பெயரிடும் மரபைப் பயன்படுத்தவும்: இது உங்கள் குறியீட்டைப் படிக்கவும் புரிந்துகொள்ளவும் எளிதாக்குகிறது.
• உங்கள் குறியீட்டிற்கு கருத்துரைகள் இடவும்: உங்கள் குறியீட்டின் ஒவ்வொரு பகுதியும் என்ன செய்கிறது என்பதை விளக்கவும்.
• உங்கள் குறியீட்டை முழுமையாக சோதிக்கவும்: இணக்கத்தன்மையை உறுதிப்படுத்த வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதிக்கவும்.
• செயல்திறனுக்காக மேம்படுத்தவும்: செயல்திறனை மேம்படுத்த ஆடியோ வொர்க்கர்ஸ் மற்றும் ஆப்ஜெக்ட் பூலிங்கைப் பயன்படுத்தவும்.
• பிழைகளை நளினமாகக் கையாளவும்: பிழைகளைப் பிடித்து தகவல் தரும் பிழைச் செய்திகளை வழங்கவும்.
• ஒரு நன்கு கட்டமைக்கப்பட்ட திட்ட அமைப்பைப் பயன்படுத்தவும்: உங்கள் ஆடியோ சொத்துக்களை உங்கள் குறியீட்டிலிருந்து தனியாக வைத்து, உங்கள் குறியீட்டை தர்க்கரீதியான தொகுதிகளாக ஒழுங்கமைக்கவும்.
• ஒரு நூலகத்தைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்: Tone.js, Howler.js, மற்றும் Pizzicato.js போன்ற நூலகங்கள் வலை ஆடியோ ஏபிஐ-யுடன் பணியாற்றுவதை எளிதாக்கலாம். இந்த நூலகங்கள் பெரும்பாலும் உயர்-நிலை சுருக்கங்கள் மற்றும் குறுக்கு-உலாவி இணக்கத்தன்மையை வழங்குகின்றன. உங்கள் குறிப்பிட்ட தேவைகள் மற்றும் திட்டத் தேவைகளுக்குப் பொருந்தும் ஒரு நூலகத்தைத் தேர்வு செய்யவும்.

குறுக்கு-உலாவி இணக்கத்தன்மை

வலை ஆடியோ ஏபிஐ பரவலாக ஆதரிக்கப்பட்டாலும், அறிந்திருக்க வேண்டிய சில குறுக்கு-உலாவி இணக்கத்தன்மை சிக்கல்கள் இன்னும் உள்ளன:

• பழைய உலாவிகள்: சில பழைய உலாவிகள் AudioContext-க்கு பதிலாக webkitAudioContext-ஐப் பயன்படுத்தக்கூடும். இதைக் கையாள இந்த வழிகாட்டியின் தொடக்கத்தில் உள்ள குறியீட்டுத் துணுக்கைப் பயன்படுத்தவும்.
• ஆடியோ கோப்பு வடிவங்கள்: வெவ்வேறு உலாவிகள் வெவ்வேறு ஆடியோ கோப்பு வடிவங்களை ஆதரிக்கின்றன. MP3 மற்றும் WAV பொதுவாக நன்கு ஆதரிக்கப்படுகின்றன, ஆனால் இணக்கத்தன்மையை உறுதிப்படுத்த பல வடிவங்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• AudioContext நிலை: சில மொபைல் சாதனங்களில், AudioContext ஆரம்பத்தில் இடைநிறுத்தப்படலாம் மற்றும் தொடங்க பயனர் தொடர்பு (எ.கா., ஒரு பொத்தான் கிளிக்) தேவைப்படலாம்.

முடிவுரை

வலை ஆடியோ ஏபிஐ என்பது வலை விளையாட்டுகள் மற்றும் ஊடாடும் பயன்பாடுகளில் செறிவான மற்றும் ஊடாடும் ஆடியோ அனுபவங்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். இந்த வழிகாட்டியில் விவரிக்கப்பட்டுள்ள அடிப்படைக் கருத்துக்கள், நடைமுறை நுட்பங்கள் மற்றும் மேம்பட்ட அம்சங்களைப் புரிந்துகொள்வதன் மூலம், நீங்கள் வலை ஆடியோ ஏபிஐ-யின் முழு திறனையும் பயன்படுத்தலாம் மற்றும் உங்கள் திட்டங்களுக்கு தொழில்முறை தரமான ஆடியோவை உருவாக்கலாம். பரிசோதனை செய்யுங்கள், ஆராயுங்கள், மற்றும் வலை ஆடியோ மூலம் என்ன சாத்தியம் என்பதன் எல்லைகளைத் தள்ள அஞ்சாதீர்கள்!